<template>
  <el-dialog :visible.sync="dialogVisible"
             title="Export Options"
             :modal='true'
             @close="close"
             append-to-body>
    <el-form>
      <el-form-item label="Export Data">
        <el-select v-model="exportDataType">
          <el-option v-for="item in exportOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false" :loading="loading">Cancel</el-button>
      <el-button type="primary"
                 @click="confirm" :loading="loading">Export</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'export-dialog',
  props: ['visible', 'loading', 'pages'],
  data () {
    return {
      exportDataType: 'Current'
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    exportOptions () {
      const base = [
        {
          label: 'Current Page',
          value: 'Current'
        },
        {
          label: 'All Data',
          value: 'All'
        }
      ]
      const pages = Array.from({ length: this.pages }, (_, index) => index + 1).map((item) => {
        return {
          label: `Page ${item}`,
          value: `${item}`
        }
      })
      return base.concat(pages)
    }
  },
  methods: {
    close () {
      Object.assign(this.$data, this.$options.data())
    },
    confirm () {
      this.$emit('confirm', this.exportDataType)
    }
  }

}
</script>

<style lang='scss'>
</style>
